<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
		<title></title>
		<style>
			* {
				margin: 0;
				padding:0;
				list-style: none;
			}
			.box {
				margin: 100px auto;
			    width: 660px;
			    height: 500px;
			    border: 5px solid #ccc;
			    background-color: #000;
			}
			.box li {
				float: left;
				margin:10px;
				width: 200px;
    			height: 230px;
			}
			.box li:nth-child(1) {
				background: url(images/01.jpg) no-repeat;
				background-size: 200px 230px;
				
			}
			.box li:nth-child(2) {
				background: url(images/02.jpg) no-repeat;
				background-size: 200px 230px;
			}
			.box li:nth-child(3) {
				background: url(images/03.jpg) no-repeat;
				background-size: 200px 230px;
			}
			.box li:nth-child(4) {
				background: url(images/04.jpg) no-repeat;
				background-size: 200px 230px;
			}
			.box li:nth-child(5) {
				background: url(images/05.jpg) no-repeat;
				background-size: 200px 230px;
			}
			.box li:nth-child(6) {
				background: url(images/06.jpg) no-repeat;
				background-size: 200px 230px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<script>
			$(function() {
				$(".box li").hover(function() {
					//鼠标经过，li其他兄弟透明度变成0.5     要清除动画效果排队(stop()清除动画排队)
					$(this).siblings().stop().fadeTo(400,0.5);
				},function() {
					//鼠标离开，li其他兄弟透明度变成1
					$(this).siblings().stop().fadeTo(400,1);
				});
			});
		
		//法二
//			$(function() {
//				$(".box li").hover(function() {
//					$(this).css('opacity',1).siblings().css('opacity',.4);
//				},function() {
//					$('.box').find('li').css('opacity',1);
//				});
//			});

		</script>
	</body>
</html>
